<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { useInference } from '@/composables/useInference'
const { getTaskProgress } = useInference()

let chart // 保存图表实例
// 折线图默认数据
const line1Data = ref([0.2, 0.19, 0.18, 0.17, 0.16, 0.16, 0.15, 0.14, 0.13, 0.11])
const line2Data = ref([0.3, 0.29, 0.28, 0.27, 0.26, 0.26, 0.25, 0.24, 0.23, 0.21])

const lineChart = (ele) => {
  // 如果图表实例已经存在，不重新初始化
  if (!chart) {
    chart = echarts.init(document.querySelector(ele))
  }

  const xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const option = {
    grid: {
      left: '5%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xdata,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: 'transparent',
          width: 2
        }
      }
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    yAxis: [
      {
        type: 'value',
        min: 50, // 修改最小值为0.5
        max: 100, // 修改最大值为1.2
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'transparent',
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '总部云增量学习acc',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#34a39a',
            lineStyle: {
              color: '#34a39a',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#08808b' },
                { offset: 1, color: 'rgba(0,0,0,0.2)' }
              ])
            }
          }
        },
        data: line1Data.value
      },
      {
        name: '省侧云协同进化acc',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#f29701',
            lineStyle: {
              color: '#f29701',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f39c12' },
                { offset: 1, color: 'rgba(0,0,0,0.2)' }
              ])
            }
          }
        },
        data: line2Data.value
      }
    ]
  }

  chart.setOption(option)
}

// 修改 updateData 函数
const updateData = (lineOneData, lineTwoData, strategyType) => {
  console.log('Strategy type:', strategyType)

  // 更新响应式数据
  if (strategyType === '01' && lineOneData) {
    line1Data.value = lineOneData
  } else if (strategyType === '02' && lineTwoData) {
    line2Data.value = lineTwoData
  }

  // 创建完整的配置对象，保留所有必要的配置
  const updatedOption = {
    grid: {
      left: '5%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: 'transparent',
          width: 2
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        min: 50, // 修改最小值为0.5
        max: 100, // 修改最大值为1.2
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'transparent',
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    tooltip: {
      show: true,
      trigger: 'item'
    },
    series: [
      {
        name: '总部云增量学习acc',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#34a39a',
            lineStyle: {
              color: '#34a39a',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#08808b' },
                { offset: 1, color: 'rgba(0,0,0,0.2)' }
              ])
            }
          }
        },
        data: line1Data.value
      },
      {
        name: '省侧云协同进化acc',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#f29701',
            lineStyle: {
              color: '#f29701',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f39c12' },
                { offset: 1, color: 'rgba(0,0,0,0.2)' }
              ])
            }
          }
        },
        data: line2Data.value
      }
    ]
  }

  console.log('Updated option:', updatedOption)

  // 使用 setOption 更新图表，并设置 notMerge 为 false 以保持配置合并
  chart.setOption(updatedOption, false)
}

// 修改 getCurrentTaskProgress 函数
const getCurrentTaskProgress = async () => {
  try {
    const res = await getTaskProgress('latest')
    console.log('API Response:', res) // 添加这行来查看API返回数据

    if (res) {
      // 根据策略类型更新对应的数据
      if (res.strategyType === '01') {
        // 更新总部云增量学习数据
        console.log('Updating line1Data with:', res.acc) // 添加这行
        updateData(res.acc, null, '01')
      } else if (res.strategyType === '02') {
        // 更新省侧云协同进化数据
        console.log('Updating line2Data with:', res.acc) // 添加这行
        updateData(null, res.acc, '02')
      }
    }
  } catch (error) {
    console.error('获取任务进度失败:', error)
  }
}

let intervalId = null

onMounted(() => {
  // 初始化图表
  lineChart('.lineChart')

  // 启动定时器
  intervalId = setInterval(() => {
    getCurrentTaskProgress()
  }, 5000) // 每5秒更新一次
})

// 添加 onUnmounted 钩子,清除定时器
onUnmounted(() => {
  // 组件卸载时清除定时器
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
})
</script>

<template>
  <div class="chart-container">
    <!-- 折线图 -->
    <div class="lineChart"></div>
  </div>
</template>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 85%;
  position: absolute;
  bottom: 0;
  left: 2.5%;

  .lineChart {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 2.5%;
  }
}
</style>
